<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!-- Meta, title, CSS, favicons, etc. -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>写信页面 </title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- Font Awesome -->
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<!-- NProgress -->
		<!--<link href="css/nprogress.css" rel="stylesheet">-->

		<!-- Custom Theme Style -->
		<link href="css/custom.min.css" rel="stylesheet">
	</head>

	<body class="nav-md">
		<div class="container body">
			<div class="main_container">
				<div id="head">
				</div>

				<!-- top navigation -->

				<!-- /top navigation -->
				<!-- page content -->
				<div class="right_col" role="main">
					<div class="">

						<div class="page-title">
							<div class="title_left">
							</div>
						</div>

						<div class="clearfix"></div>

						<div class="row">
							<div class="col-md-12">
								<div class="x_panel">
									<div style="">
										<span style="font-size: 16px;font-weight: bolder;">收&nbsp;&nbsp;件&nbsp;&nbsp;人:</span>
										<select style="width: 80px;height: 30px;margin-left: 5px;">
											<option>刘一饼</option>
											<option>刘一饼</option>
											<option>刘一饼</option>
										</select>
									</div>
									
								<div style="margin-top: 40px;">
									<span style="font-size: 16px;font-weight: bolder;">邮件标题:</span>
									<input type="text" style="width: 400px;margin-left: 5px;"/>
								</div>
								<div style="margin-top: 40px;">
									<span style="font-size: 16px;font-weight: bolder;">邮件内容:</span>
									<textarea style="width: 400px;height: 80px;margin-left: 5px;"></textarea>
								</div>
								<div style="float: left;margin-top: 40px;">
									<button type="button" class="btn btn-info" style="margin-left: 80px;">发送</button>
									<button type="button" class="btn btn-success" >返回</button>
								</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- /page content -->

				<!-- footer content -->
				<footer>
					<div class="pull-right" style="font-size: large">
						GLS国际物流系统通知 <a href="https://colorlib.com"></a>
					</div>
					<div class="clearfix"></div>
				</footer>
				<!-- /footer content -->
			</div>
		</div>

		<!-- jQuery -->
		<script src="js/jquery.min.js"></script>
		<!-- Bootstrap -->
		<script src="js/bootstrap.min.js"></script>
		<!-- FastClick -->
		<script src="js/fastclick.js"></script>
		<!-- NProgress -->
		<script src="js/nprogress.js"></script>
		<!-- validator -->
		<script src="js/validator.js"></script>
		<script type="text/javascript">
			function spanHide(obj) {
				$(obj).prev().hide();
			}
			$("#rCompose").on("click", function() {
				$(".panel").children("span").hide();
			});

			$(function() {
				let dt = setInterval(function() {
					$.get('js/message.json', null, call_back);
				}, 1000 * 5);

				function call_back(data) {
					let count = data.message.length;
					if (count > 0) {
						$("#message_new").show();
						$("#message_new").text(count);
						let $add = '';
						$(data.message).each(function() {
							$add += '<li><a><span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>' +
								'<span><span>' + this.sender + '</span><span class="time">1分钟前</span>' +
								'</span><span class="message">' + this.content + '</span></a><>';
						});
						$add += '<li><div class="text-center"><a><strong>查看所有信息' +
							'<i class="fa fa-angle-right"></i></a></div><>';
						$("#menu1").children().remove().end().append($add);
					} else {
						$("#message_new").text("");
						$("#message_new").hide();
						return;
					}
				}
			});
		</script>
		<!-- Custom Theme Scripts -->

		<!-- validator -->
		<script>
			$(document).ready(function() {
				$("#head").load("head.html");
			});
			// initialize the validator function
			validator.message.date = 'not a real date';

			// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
			$('form')
				.on('blur', 'input[required], input.optional, select.required', validator.checkField)
				.on('change', 'select.required', validator.checkField)
				.on('keypress', 'input[required][pattern]', validator.keypress);

			$('.multi.required').on('keyup blur', 'input', function() {
				validator.checkField.apply($(this).siblings().last()[0]);
			});

			$('form').submit(function(e) {
				e.preventDefault();
				var submit = true;

				// evaluate the form using generic validaing
				if (!validator.checkAll($(this))) {
					submit = false;
				}

				if (submit)
					this.submit();

				return false;
			});
		</script>
		<!-- /validator -->
	</body>
</html>
